<template>
	<div class="ui-pane">
		<ui-header headertit="布局"></ui-header>
		<div class="ui-content">
			<arealine linetit="横向布局"></arealine>
			<div class="page_line flex-star">
				<div class="bg-666"></div>
				<div class="bg-aaa"></div>
				<div class="bg-666"></div>
			</div>

			<arealine linetit="纵向布局"></arealine>
			<div class="page_line direction">
				<div class="bg-666"></div>
				<div class="bg-aaa"></div>
				<div class="bg-666"></div>
			</div>

			<arealine linetit="两端布局"></arealine>
			<div class="page_line flex-between">
				<div class="bg-666"></div>
				<div class="bg-aaa"></div>
			</div>

			<arealine linetit="组合布局"></arealine>
			<div class="area-line flex-between">
				<div class="area_left">
					<div class="line_tit">
						我系渣渣辉陪你贪玩蓝月
					</div>
					<div class="line_cont">
						我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月
					</div>
					<div class="flex-star line_num">
						<div class="flex-star">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-liulan"></use>
							</svg>
							<span>666</span>
						</div>
						<div class="flex-star">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-zan"></use>
							</svg>
							<span>688</span>
						</div>
					</div>
				</div>
				<div class="line_rihgt bg-aaa"></div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {}
		},
		mounted() {}
	}
</script>

<style scoped="scoped">
	.page_line {
		margin: .1rem .25rem 0 .25rem;
		height: 1.5rem;
	}

	.page_line div {
		height: 1.5rem;
		width: calc(100% / 3);
	}

	.direction div {
		height: .5rem;
		width: 100%;
	}

	.area-line {
		background: #ccc;
		margin: 0 .25rem;
		color: #666;
		padding: .2rem .25rem;
	}

	.line_tit {
		color: #333;
		font-size: .3rem;
		font-weight: bold;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.area-line .line_rihgt {
		height: 2rem;
		width: 2rem;
	}

	.area_left {
		height: 2rem;
		padding: .1rem 0;
		width: calc(100% - 2.4rem);
	}

	.line_cont {
		color: #666;
		font-size: .24rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		margin: .1rem 0 .2rem 0;
		-webkit-box-orient: vertical;
	}
	
	.line_num .flex-star{
		margin-right: .15rem;
		font-size: .24rem;
	}
	
	.line_num .flex-star svg{
		width: .32rem;
		height: .32rem;
		margin-right: .05rem;
	}
</style>
